<template>
  <!-- 歌词详情 -->
  <div class="lyric_detail" ref="lyricDom">
    <div class="head">
      <div class="name">{{ currentPlaySong.name }}</div>
      <div class="alia">{{ currentPlaySong.alia.join("/") }}</div>
      <div class="singer">
        {{ currentPlaySong.ar.map((ele) => ele.name).join("/") }}
      </div>
    </div>
    <p
      v-for="(item, index) in lys"
      :key="index"
      class="lyric_item"
      :class="{ active: currentIndex === index }"
    >
      {{ item }}
    </p>
  </div>
</template>

<script>
import {
  defineComponent,
  inject,
  onMounted,
  reactive,
  toRefs,
  watch,
  ref,
} from "vue";
export default defineComponent({
  name: "LyricDetail",
  setup() {
    let lyric = inject("lyric");
    let currentPlaySong = inject("currentPlaySong");
    let currentPlaySongCurrentTime = inject("currentPlaySongCurrentTime");
    let data = reactive({
      lys: [],
      times: [],
      currentIndex: 0,
    });
    let lyricDom = ref(null); // 歌词Dom

    onMounted(() => {
      if (lyric.value.length !== 0) {
        manageLyric(lyric.value);
      }
    });

    watch(
      () => lyric.value,
      () => {
        if (lyric.value.length !== 0) {
          manageLyric(lyric.value);
        }
      }
    );

    // 监听控制歌词
    watch(
      () => currentPlaySongCurrentTime.value,
      () => {
        for (let i = 0; i < data.times.length; i++) {
          if (currentPlaySongCurrentTime.value > data.times[i]) {
            data.currentIndex = i;
          }
        }

        let len = Math.floor(data.lys.length / 6);
        if (data.currentIndex < len) {
          return;
        }

        if (document.getElementsByClassName("lyric_item").length == 0) {
          return;
        }
        let top =
          document.getElementsByClassName("lyric_item")[data.currentIndex - len]
            .offsetTop;

        lyricDom.value.scrollTo(0, top);
      }
    );

    // 整理歌词
    let manageLyric = (lyricArr) => {
      lyricDom.value.scrollTo(0, 0);
      data.lys = [];
      data.times = [];
      let f = lyricArr.split("[");
      f.forEach((item) => {
        let songWord = item.split("]");
        let songTime = songWord[0].split(".")[0].split(":");
        let Time = songTime[0] * 60 + parseInt(songTime[1]);
        if (songWord[1]) {
          data.lys.push(songWord[1]);
          data.times.push(Time);
        }
      });
    };

    return {
      ...toRefs(data),
      currentPlaySong,
      lyricDom,
    };
  },
});
</script>
<style scoped>
.lyric_detail {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  transition: all 0.3s;
}

.head {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 18px 0;
}
.name {
  color: #d5d5d5;
  font-size: 24px;
}
.alia,
.singer {
  font-size: 14px;
  color: #6c6b6b;
}
.alia {
  margin: 5px 0;
}
.singer {
  font-size: 16px;
}
.lyric_item {
  display: inline-block;
  width: 100%;
  color: #6b6a6a;
  font-size: 16px;
  text-align: center;

  transition: all 0.3s;

  margin: 6px 0;
}
.active {
  font-size: 20px;
  color: #ffffff;
  font-weight: 700;
}
</style>
